<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    "
  >
    <iframe
      src="http://yp.cf37.cn/aa.pdf"
      style="width: 50%; height: 60vh"
    ></iframe>
    <!-- <div style="width: 800px">
      <pdf ref="pdf" :src="url"> </pdf>
    </div> -->
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  data() {
    return {
      url: "/aa.pdf",
      numPages: null, // pdf 总页数
    };
  },
  components: {
    pdf,
  },
  mounted() {
    this.getNumPages();
  },
  methods: {
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
          console.log(this.numPages);
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
  },
};
</script>
